<template>
	<div style="background-color: #009688;">
		<div class="a">
			
			<input type="text" class="b" placeholder="查学校,查专业,查资讯">
			<a href="#" class="c">
				<img src="../../assets/搜索框.png" style="width: 30px;">
			</a>
		</div>
	</div>
	
</template>

<script>
	export default{
		name: 'search'
	}
</script>

<style  scoped>
	body {
		background-color: rgba(0,0,0,0.1);
	}
	
	.a {
		position: absolute;
		top: 20%;
		transform: translate(-50%, -50%);
		background-color: rgba(0,0,0,0.4);
		height: 40px;
		border-radius: 40px;
		padding: 10px;
	}
	
	.a:hover .b {
		width: 180px;
		padding: 0 6px;
	}
	
	.a:hover .c {
		background-color: rgba(0,0,0,0.4);
	}
	
	.b {
		border: none;
		background: none;
		/* 取消选中搜索框时的外边框 */
		outline: none;
		width: 0;
		padding: 0;
		transition: .4s;
		line-height: 16px;
		font-size: 16px;
		color: 	#F5FFFA;
	}
	
	.c {
		color: #009688;
		float: right;
		width: 20px;
		height: 20px;
		border-radius: 40%;
		background-color: rgba(0,0,0,0.4);
		display: flex;
		justify-content: center;
		align-items: center;
		transition: .4s;
	}
	
</style>
